<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 必要的标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA=="
          href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        #navbar-left{
            background:#3B3E47;
            height: 1000px;
        }
        #window{
            height: 1000px;
            background: #EBEBEB;
        }
        a{
            text-decoration: none;
            color: #80878D;
        }

        #main_nav{
            height: 600px;
            list-style: none;
            margin-top: 30px;

        }
        li{
            margin-top: 25px;
            list-style-type: none;

        }
        a:hover{
            color: aliceblue;
            text-decoration: none;
        }
        img{
            width: 25px;
        }
        .img_right{
            width: 15px;
            margin-left: 20px;
        }
        .img_left{
            margin-right: 30px;
        }
        .ul_inside{
            height: auto;
        }

        .ul_inside li a{
            text-decoration: none;
            color: #80878D;
        }
        .ul_inside li a:hover{
            text-decoration: none;
            color: #80878D;
        }

        .box{
            width: 700px;
            height: 800px;
            margin: 40px auto;

        }
        .new_group{
            width: 400px;
            height: 600px;
            border: solid;
            border:none;
            margin: 0 auto;
        }
        .name{

            width: 270px;
            height: 40px;
            font-size: 15px;

        }


        .submit{
            width:90px;
            height:40px;
            padding: 10px;
            margin-left:45px;
            font-size: 15px;
            background-color: #3B3E47;
            color: white;
            border:none;
        }
        .back{
            display:inline-block;
            text-align: center;
            width:80px;
            height:40px;
            margin-left: 150px;
            line-height: 40px;
            font-size: 15px;
            text-decoration: none;
            background-color: #3B3E47;
            color: white;
            border:none;
        }
        img{
            width:40px;
            margin-right:10px;
        }
        .i1{
            margin-top: 10px;

        }

        .p1{

            position: relative;
        }
        h3{
            color:#3B3E47;
            font-size:30px;
            line-height:1.5;

        }
        textarea{
            resize: none;
        }
        .img_left{
            width: 25px;
        }
        .i2{
            position: relative;
            top: -100px;
        }
        .bgcolor{
            background-color: #ebebeb;
        }
        img{
            width: 25px;
        }
    </style>
    <script type="text/javascript">

        function validateIt(inputelement){

            if(inputelement.validity.patternMismatch){
                inputelement.setCustomValidity('组名必须是2到5个中文字符');
            }else{
                inputelement.setCustomValidity(''); //输入内容符合验证条件
            }
            return true;
        }



    </script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2" id="navbar-left"  >
            <ul id="main_nav" >
                <li><img src="/img/笑脸.png" alt="">&nbsp;<a href="#">欢迎,通讯录管理系统!</a></li>

                <li class="ul_outside"><a href="http://localhost:8080/"><img src="/img/左箭头.png"></a></li>
                <li><a href="http://localhost:8080/tel/new">新建联系人</a></li>
                <li><a href="http://localhost:8080/allLinkman">所有联系人</a></li>

                <li><a href="http://localhost:8080/addGroup/display">查看/编辑分组</a></li>
                <li><a href="http://localhost:8080/linkman/">查看/编辑联系人</a></li>
                <li><a href="http://localhost:8080/login?logout">退出登录</a></li>
            </ul>
        </nav>
        <div class="col-md-10" id="window">
            <div class="box">
                <h3 align="center">新建分组</h3>
                <form th:action="@{save}" th:object="${group}" method="POST">
                    <input type="hidden" th:field="${group.groupId}" pattern="^[\u4e00-\u9fa5]{2,8}$">
                    <div class="new_group">
                        <p align="center" class="p1" ><img class="i1" src="/img/新建分组.png" alt="分组"><input th:field="${group.groupName}" type="text" placeholder="设置分组姓名" class="name bgcolor" pattern="^[\u4e00-\u9fa5]{2,5}$"  required oninvalid="validateIt(this)" oninput="validateIt(this)"></p>
                        <p align="center"><img  src="/img/新建描述.png" alt="描述" class="i2"><textarea th:field="${group.description}" cols="35" rows="5" placeholder="描述一下吧" class="bgcolor"></textarea></p>
                        <input  type="submit" value="提交分组" class="submit">  <a class="back" href="http://localhost:8080/linkman/new" >下一步</a>

                    </div>
                </form>


            </div>
        </div>
    </div>
</div>

</body>
</html>